<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志</title>
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
    <style>
        h2{
            padding-left: 7%;
        }
        .table_notice{
            width: 60%;
            margin-left: 10%;
        }
        #addnotice{
            float: right;
            margin-right: 15px;
        }
    </style>
</head>
<body>
<div>
    <h2>日志管理</h2>
    <div class="table_notice">
        <table class="table table-bordered" id="dept-diary">
            <tr class="success">
                <td colspan="5">日志列表 </td>
            </tr>
            <tr class="info">
                <th>日期</th>
                <th>姓名</th>
                <th>主题</th>
                <th>领导评论</th>
                <th>操作</th>
            </tr>
            <tr v-for="diary in diaryList">
                <td>{{diary.sdate}}</td>
                <td>{{diary.uname}}</td>
                <td>{{diary.wtitle}}</td>
                <td>{{diary.reply_content}}</td>
                <td>
                    <button type="button" class="btn btn-default btn-xs look" v-bind:value=diary.wid>查看</button>&nbsp;&nbsp;&nbsp;
                    <template v-if="diary.reply_content==null">
                      <button type="button" class="btn btn-default btn-xs change" v-bind:value=diary.wid>评论</button>
                    </template>
                    
                </td>
            </tr>
        </table>
        <div id="layPage"></div>
    </div>
    <div class="modal fade" id="look-diary" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">查看日志</h4>
                </div>
                <div class="modal-body">
                    <form action="../addMyDiary" method="post" id="from">
                        <table class="table">
                            <tr>
                                <td>日志主题</td>
                                <td>{{diary.wtitle}}</td>
                            </tr>
                            <tr>
                                <td>作者</td>
                                <td>{{diary.uname}}</td>                               
                            </tr>
                            <tr>
                                <td>日期</td>
                                <td>{{diary.sdate}}</td>                               
                            </tr>
                            <tr>
                                <td>内容</td>
                                <td>{{diary.wcontent}}</td>                               
                            </tr>
                            <tr>
                                <td>评论</td>
                                <td>{{diary.reply_content}}</td>                               
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
    
   
    <div class="modal fade" id="update-diary" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">查看日志</h4>
                </div>
                <div class="modal-body">
                    <form action="" method="post" id="">
                        <table class="table">
                    
                            <tr>
                                <td>评论</td>
                                <td><textarea cols="40" rows="6" name="wcontent" id="wcontent"></textarea></td>                               
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary " data-dismiss="modal" id="reply_diary">评论日志</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    
  
      
</div>
 <!-- 评论 -->
      
        

<script type="text/javascript">
    $(function () {
    	var currentPage = 1;
    	var pid;
    	$("#dept-diary").on('click','.look', function(){
    		 pid = $(this).val();
    		 console.log(pid)
    		 $("#look-diary").modal("show");
    		 vue2.getDiaryPid();
    	})
    	
        
        $(".submit").click(function(){
        	$("#from").submit();
        })
        
        var vue = new Vue({
        	el:"#dept-diary", 
        	data:{diaryList:""},
        	methods:{
        		getMyDiary: function(){
        			var _self = this;
        			$.ajax({
        				url:'../lookMyDiary',
        				type:'post',
        				data:{currentPage:currentPage},
        				dataType:'json',
        				success : function(result){
        					console.log(result);
        					_self.diaryList = result.diaryList;
        					
        					laypage({
        						cont:$("#layPage"),//分页内容所有显示的容器位置 
        						pages:result.mixNum,//分页显示的总页数
        						curr:currentPage,//当前页
       						 skin:'molv',//皮肤
       						 skip:true,//支持跳页的功能
       						 last:'尾页',
       						 groups:result.limit, 
       						 jump:function(obj,first){//触发分页后的回调
       							 currentPage=obj.curr;
       							 if(!first){//一定要加此判断，否则初始时会无限刷新
       								vue.getMyDiary();//获取当前页
       							  }
        						 }
        					});
        					
        				}
        			})
        		}
        	}
        })
        vue.getMyDiary();
    	
    	var vue2 = new Vue({
    		el:"#look-diary",
    		data:{diary:""},
    		methods:{
    			getDiaryPid :function(){
    				var _self = this;
    				$.ajax({
    					url:'../getDiaryOne',
    					type:'post',
    					data:{'wid':pid},
    					dataType:'json',
    					success : function(result){
    						console.log(result);
    						_self.diary = result;
    					}
    				})
    			}
    		}
    	})
    	
    	$("#dept-diary").on('click','.change',function(){
    		pid = $(this).val();
    		$("#update-diary").modal("show");
    		
    	})
    	
    	$("#reply_diary").click(function(){
    		var wcontent = $("#wcontent").val();
    		$("#wcontent").val("");
    		$.ajax({
    			url:'../replyStaffDiary', 
    			type:'post',
    			data:{'wid':pid,'reply_content':wcontent},
    			dataType:'json',
    			success : function(result){
    				if(result==true){
    					alert("评论成功");
    					vue.getMyDiary();
    				}else{
    					alert("评论失败")
    				}
    			}
    		})
    	})
    	
    })
</script>
</body>
</html>